.account-container-wrapper {
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 26rpx 32rpx;
  --duration: .1s;

  .confirm-btn {
    margin-top: 28rpx;
    width: 100%;
    height: 84rpx;
    background: #4CA66B;
    border-radius: 400rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      height: 48rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 48rpx;
    }
  }

  .agreement-wrap {
    width: 100%;
    margin-top: 48rpx;
    display: flex;
    align-items: center;

    .text {
      height: 50rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      line-height: 50rpx;

      .active {
        color: #4CA66B;
      }
    }
  }

  .tip-wrapper {
    margin-top: 66rpx;
    width: 100%;

    .tip-value {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 40rpx;
      word-break: break-all;
      margin-bottom: 18rpx;
    }

    .tip-title {
      height: 48rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #000000;
      line-height: 48rpx;
      margin-bottom: 24rpx;
    }
  }

  .meal-wrap {
    width: 100%;
    margin-top: 42rpx;

    .meal-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28rpx;

      .meal-item {
        width: 100%;
        padding: 32rpx 0 22rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        --bg: #FFFFFF;
        --color: #000000;
        background-color: var(--bg);
        border: 2rpx solid #4CA66B;
        transition: background-color var(--duration);

        &.active {
          --bg: #4CA66B;
          --color: #FFFFFF;
        }

        .money {
          height: 48rpx;
          font-size: 36rpx;
          font-weight: 500;
          color: var(--color);
          line-height: 48rpx;
          transition: color var(--duration);
          white-space: nowrap;

        }

        .desc {
          height: 48rpx;
          line-height: 48rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: var(--color);
          margin-top: 12rpx;
          transition: color var(--duration);
        }
      }
    }

    .meal-title {
      width: 112rpx;
      height: 48rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #000000;
      line-height: 48rpx;
    }
  }

  .card-container {
    width: 100%;
    height: 296rpx;
    box-sizing: border-box;
    position: relative;
    background: linear-gradient(132deg, #4CA66B 0%, rgba(76,166,107,0.65) 100%);
    border-radius: 40rpx 40rpx 20rpx 20rpx;
    overflow: hidden;

    .tip-wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 6;
      background: #389E4F;

      .tip-value {
        font-size: 20rpx;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 42rpx;

      }
    }

    .body {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 40rpx;
      z-index: 3;
      padding: 26rpx 58rpx 0;

      .btn-group {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20rpx;

        .btn-item {
          display: flex;
          justify-content: space-between;
          background: #4CA66B;
          border-radius: 3800rpx;
          opacity: 1;
          border: 2rpx solid #FFFFFF;
          align-items: center;
          padding: 0 32rpx;
          box-sizing: border-box;
          line-height: 1;

          .btn-title {
            height: 48rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 48rpx;
          }

          .chevron {
            width: 10rpx;
            height: 16rpx;
            margin-left: 8rpx;
          }
        }
      }

      .money {
        font-size: 52rpx;
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: 3px;
        text-align: center;
        margin-top: 24rpx;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        line-height: 1;

        .pix {
          font-size: 24rpx;
          transform: translateY(-6rpx);
        }
      }

      .card-title {
        height: 48rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 48rpx;
        z-index: 2;
        text-align: center;
      }
    }


    .bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  }

}
